---
image: /generated/articles-docs-motion-blur-trail.png
title: '<Trail>'
slug: trail
crumb: 'Motion blur'
---

import {TrailExample} from '../../components/TrailExample/TrailExample';

```twoslash include example
const BlueSquare: React.FC = () => <div></div>
// - BlueSquare
```

_available from v3.2.39, previously called `<MotionBlur>`_

The `<Trail>` component duplicates it's children and adds a time offset to each layer in order to create a trail effect.

For this technique to work, the children must be absolutely positioned so many layers can be created without influencing the layout.  
You can use the [`<AbsoluteFill>`](/docs/absolute-fill) component to absolutely position content.

## API

Wrap your content in `<Trail>` and add the following props in addition.

### `layers`

How many layers are added below the content. Must be an integer

### `lagInFrames`

How many frames each layer is lagging behind the last one. Can also a floating point number.

### `trailOpacity`

_previously called `blurOpacity`_

The highest opacity of a layer. The lowest opacity is 0 and layers intbetween get interpolated.

## Example usage

```tsx twoslash
// @include: example-BlueSquare
// ---cut---
import {Trail} from '@remotion/motion-blur';
import {AbsoluteFill} from 'remotion';

export const MyComposition = () => {
  return (
    <Trail layers={50} lagInFrames={0.1} trailOpacity={1}>
      <AbsoluteFill
        style={{
          backgroundColor: 'white',
          justifyContent: 'center',
          alignItems: 'center',
        }}
      >
        <BlueSquare />
      </AbsoluteFill>
    </Trail>
  );
};
```

## Demo

<TrailExample />

<Credits
  contributors={[
    {
      username: 'UmungoBungo',
      contribution: 'Implementation',
    },
  ]}
/>

## See also

- [Source code for this component](https://github.com/remotion-dev/remotion/blob/main/packages/motion-blur/src/Trail.tsx)
- [Common mistake with `<Trail>` and `<CameraMotionBlur>`](/docs/motion-blur/common-mistake)
